<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="active==0?'text-green cur':''" @tap="tabSelect(0)">
					正在处理
				</view>
				<view class="cu-item flex-sub" :class="active==1?'text-green cur':''" @tap="tabSelect(1)">
					处理完成
				</view>
			</view>
		</scroll-view>

		<!-- <view v-if="active == 0" class="ppfl_c"> -->
		<view v-if="active == 0" class="ppfl_c">
			<view v-if="noData==false">
				<view v-for="(item,index) in waitComplaint" :key="index"
					class="bg-white margin-top margin-right-xs radius margin-left-xs padding">
					
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉人</view>
						<view class="text-gray">{{item.complaintPersonName}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">所属房间</view>
						<view class="text-gray">{{item.houseNumber}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉时间</view>
						<view class="text-gray">{{item.createTime }}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉人手机号</view>
						<view class="text-gray">{{item.complaintPersonPhone }}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉处理状态</view>
						<view class="text-gray">{{item.status }}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉类型</view>
						<!-- <view class="text-gray">{{item.typeCdName}}</view> -->
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">报修内容</view>
						<view class="text-gray">{{item.content}}</view>
					</view>
					<view v-if="item.currentUserId == item.startUserId"
						class="solid-top flex justify-end margin-top padding-top-sm padding-bottom-sm">
						<button class="cu-btn sm bg-green " @click="_dealComplaint(item)">取消</button>
						<button class="cu-btn sm line-gray margin-left" @click="_toComplaintDetail(item)">详情</button>
					</view>
					<view v-if="item.currentUserId != item.startUserId"
						class="solid-top flex justify-end margin-top padding-top-sm padding-bottom-sm">
						<button class="cu-btn sm line-gray" @click="_toComplaintDetail(item)">详情</button>
					</view>
				</view>
			</view>
			<view v-else>
				<no-data-page></no-data-page>
			</view>
		</view>


		<view v-if="active == 1" class="ppfl_c">
			<view v-if="noData==false">

				<view v-for="(item,index) in complaintd" :key="index"
					class="bg-white margin-top margin-right-xs radius margin-left-xs padding">
					
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉人</view>
						<view class="text-gray">{{item.complaintPersonName}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">所属房间</view>
						<view class="text-gray">{{item.houseNumber}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉时间</view>
						<view class="text-gray">{{item.createTime }}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉人手机号</view>
						<view class="text-gray">{{item.complaintPersonPhone }}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉处理状态</view>
						<view class="text-gray">{{item.status }}</view>
					</view>
<!-- 					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">投诉类型</view>
						<view class="text-gray">{{item.typeCdName}}</view>
					</view> -->
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">报修内容</view>
						<view class="text-gray">{{item.content}}</view>
					</view>
					<view class="solid-top flex justify-end margin-top padding-top-sm padding-bottom-sm">
						<button class="cu-btn sm line-gray" @click="_toComplaintDetail(item)">详情</button>
					</view>
				</view>
			</view>
			<view v-else>
				<no-data-page></no-data-page>
			</view>
		</view>

		<view class="cu-modal" :class="delOwnerMemberFlag==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="_cancleCall()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您确认取消？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action margin-0 flex-sub  solid-left" @tap="_cancleDeleteOwnerMember()">取消</view>
					<view class="action margin-0 flex-sub text-green solid-left"
						@tap="_doDeleteOwnerMember(curOwnerMember)">确认
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;
	import noDataPage from '@/components/no-data-page/no-data-page.vue'
	import {
		cancelOrder
	} from '../../api/owner/ownerApi.js'
	export default {
		data() {
			return {
				delOwnerMemberFlag: false,
				TabCur: 0,
				scrollLeft: 0,
				waitComplaint: [],
				complaintd: [],
				active: 0,
				ownerId: '',
				roomId: '',
				communityId: '',
				page: 1,
				totalPage: 0,
				loading: false,
				noData: false,
				userId: '',
				bindState:''
			};
		},
		components: {
			noDataPage
		},
		onLoad: function(options) {
			let that = this;
			let identity = uni.getStorageSync("bindUserInfo");
			let countryId = uni.getStorageSync("_selectCommunity");
			this.communityId = countryId.id
			let ownerId = uni.getStorageSync("commonUser");
			this.userId = ownerId.id
			that.bindState = identity.bindState
			context.onLoad(options);
			that._loadCompaint(that.active);
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {
			this._loadCompaint() //获取家庭信息
		},
		onShow: function() {
			let that = this;
			if (that.communityId) {
				that._loadCompaint(that.active);
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this._loadCompaint(this.active);
			uni.stopPullDownRefresh();
		},

		methods: {
			/**
			 * 加载我的待报修
			 */
			_loadCompaint: function(_active) {
				let that = this;
				if (_active == 0) {
					uni.request({
						url: constant.url.complaintsSubmit,
						method: "GET",
						header: context.getHeaders(),
						data: {
							communityId:this.communityId,
							id:this.userId,
							type: 2, //处理中
						},
						success: (res) => {
							if (res.statusCode == 200) {
								let _ownerComplaints = res.data.result;
								// if (_ownerComplaints.length < 1) {
								// 	that.noData = true;
								// }
								that.waitComplaint = _ownerComplaints;
								console.log("that.waitComplaint",that.waitComplaint)
							}
						},
						fail: function(e) {
							wx.showToast({
								title: "服务器异常了",
								icon: 'none',
								duration: 2000
							});
						}
					});
				} else if (_active == 1) {
					uni.request({
						url: constant.url.complaintsSubmit,
						header: context.getHeaders(),
						method: "GET",
						data: {
							communityId:this.communityId,
							id:this.userId,
							type: 3,  //已处理
						},
						success: (res) => {
							if (res.statusCode == 200) {
								let _ownerComplaints = res.data.result;
								console.log('已处理', _ownerComplaints);
								that.complaintd = _ownerComplaints;
							}
						},
						fail: function(e) {
							wx.showToast({
								title: "服务器异常了",
								icon: 'none',
								duration: 2000
							});
						}
					});
				}

			},
			onChange: function(e) {

				this._loadCompaint(e.detail.index);
			},
			tabSelect: function(_active) {
				this.active = _active;
				this._loadCompaint(_active);
				this.noData = false;
			},
			_toComplaintDetail: function(_item) {
				uni.navigateTo({
					url: '/pages/complaintDetail/complaintDetail?complaintId=' + JSON.stringify(_item)
				})
			},
			_cancleCall: function() {
				this.delOwnerMemberFlag = false;
			},
			_dealComplaint: function(item) {
				this.delOwnerMemberFlag = true;
				this.curOwnerMember = item.id;
			},
			_cancleDeleteOwnerMember: function(item) {
				this.delOwnerMemberFlag = false;
			},
			_doDeleteOwnerMember: function(id) {
				let that = this;

				uni.request({
					url: `https://42962976mq.zicp.fun/wechat/office/complaintManage/${JSON.stringify(id)}`,
					method: "PUT",
					//动态数据
					success: function(res) {
						let _data = res.data;
						console.log("取消", _data)
						uni.showToast({
							title: '取消成功',
							icon: 'none',
							duration: 2000
						});
						that.delOwnerMemberFlag = false;
						// that.onReady()
						that._loadCompaint(that.active);
					},
					fail: function(e) {
						reject(e);
					}
				});
			}
		}
	};
</script>
<style>
	@import "./complaintList.css";
</style>
